<template>
  <div class="cropper-wrap">
    <div class="cropper">
      <label :for="id"> <slot /></label>
      <!-- <img :src="img" class="img" /> -->
      <!-- option是配置，格式是对象，getbase64Data是组件的一个方法获取裁剪完的头像 2.14新增一个获取getblobData的方法,有需要的自取 -->
      <H5Cropper
        ref="cropper"
        :option="option"
        @getbase64Data="getbase64Data"
      ></H5Cropper>
    </div>
  </div>
</template>

<script>
import H5Cropper from "vue-cropper-h5";
export default {
  components: { H5Cropper },
  props: {
    value: {
      default: "",
    },
    size: {
      default: 30,
    },
    fileAttrs: {
      default: () => ({
        capture: "camera",
      }),
    },
  },
  model: {
    event: "valuechange",
    prop: "value",
  },
  data() {
    let width = (window.screen.width * (3 / 2)) / 1.65;
    return {
      file: null,
      id: "",
      option: {
        img: "", //裁剪图片的地址
        outputSize: 0.8, //裁剪生成图片的质量(可选0.1 - 1)
        outputType: "png", //裁剪生成图片的格式（jpeg || png || webp）
        info: false, //图片大小信息
        canScale: true, //图片是否允许滚轮缩放
        autoCrop: true, //是否默认生成截图框
        autoCropWidth: width, //默认生成截图框宽度
        autoCropHeight: width / (4 / 3), //默认生成截图框高度
        fixed: true, //是否开启截图框宽高固定比例
        fixedNumber: [4, 3], //截图框的宽高比例
        full: false, //false按原比例裁切图片，不失真
        fixedBox: true, //固定截图框大小，不允许改变
        canMove: true, //上传图片是否可以移动
        canMoveBox: true, //截图框能否拖动
        original: false, //上传图片按照原始比例渲染
        centerBox: true, //截图框是否被限制在图片里面
        height: true, //是否按照设备的dpr 输出等比例图片
        infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高
        maxImgSize: 3000, //限制图片最大宽度和高度
        enlarge: 1024 / width, //图片根据截图框输出比例倍数
        mode: "375px 667px", //图片默认渲染方式
      }, //配置
      img: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.id = this.$uuid();
      this.file = this.$refs.cropper.$el.querySelector("input[type=file]");
      // this.file.setAttribute("capture", "camera");
      Object.keys(this.fileAttrs).forEach((key) => {
        this.file.setAttribute(key, this.fileAttrs[key]);
      });
      this.file.setAttribute("id", this.id);
    });
  },
  methods: {
    uploadFile() {
      this.$nextTick(() => {
        this.$refs.fileInput.click();
      });
    },
    getbase64Data(input) {
      this.$compressImgBySize(input, this.size).then((data) => {
        this.$emit("success", data);
        this.$emit("valuechange", data);
      });
    },
    // getFile(file) {
    //   this.compressImgBySize(file, 200).then((data) => {
    //     this.$emit("success", data);
    //     this.$emit("valuechange", data);
    //   });

    //   // this.img = data;
    // },
  },
};
</script>

<style lang="scss" scoped>
.cropper-wrap {
  // display: flex;
  // justify-content: space-between;
  .upbtn {
    ::v-deep input[type="file"] {
      display: none;
    }
  }
}
.cropper {
  /* 切记position: relative一定要有 */
  position: relative;
  overflow: hidden;
  text-align: center;
}
/* .img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
} */
</style>
